<template>
  <div id="app">
    <el-row>
      <!-- 有背景颜色按钮 -->
      <el-button>默认按钮</el-button>
      <el-button type='primary'>主要按钮</el-button>
      <el-button type='success'>成功按钮</el-button>
    </el-row>
    <el-row>
      <!-- 增加plain 朴素按钮  背景色朴素  滑过或点击 变深 -->
      <el-button type='primary' plain>朴素按钮</el-button>
      <el-button type='success' plain>朴素成功按钮</el-button>
      <el-button type='info' plain>朴素信息按钮</el-button>
    </el-row>
    <!-- 圆角按钮 round 胶囊按钮 border-radius = 50%height -->
    <el-row>
      <el-button round></el-button>
      <el-button round type='warning'>警告</el-button>
    </el-row>
    <!-- 圆形按钮 ，可以添加icon图作为背景 添加文字变椭圆-->
    <el-row>
      <!-- 带图标的按钮：设置icon属性即可 -->
      <el-button circle icon="el-icon-search"></el-button>
    </el-row>
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
